<template>
  <div v-for="(item,index) in essayList.list"
       :key="index"
       style="padding-bottom: 15px;"
  >
    <a-card @click="handleClickCard(item.essayId)" hoverable style="border-radius: 10px;max-width: 930px;background-color: #ffffff" >
      <a-card-meta >
        <template #title><h2>{{item.title}}</h2></template>

        <template #description><calendar-filled />发布时间:{{item.datetime}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br/>
          <folder-open-filled />类别:&nbsp;{{item.category}}
        </template>
      </a-card-meta>
      <br/>
      <title style="overflow: hidden;
                    display: -webkit-box;
                    -webkit-line-clamp: 3;
                    color: #999999;
                    -webkit-box-orient: vertical;">{{item.content}}</title>
    </a-card>
  </div>
  <div style="text-align: center">
    <a-pagination v-model:current="essayList.page" :total="essayList.total" :defaultPageSize="8" @change="changePage" />
  </div>
</template>

<script setup>
import {useStore} from "vuex";
import {useRouter} from "vue-router";
import {ref, watchEffect} from "vue";
import {CalendarFilled,FolderOpenFilled} from '@ant-design/icons-vue';
import request from "@/utils/request";

const essayList=ref()
const store = useStore()
const router=useRouter()


watchEffect(()=>{
  essayList.value=store.getters.getEssayList
  essayList.value.page=Number(essayList.value.page)
})

const changePage=(page)=>{
  console.log("page  :",page)
  request.post("essay/getlist", {page:page,limit:8}).then(res=>{
    console.log(res)
    store.commit("setEssayList",res.data)

    const timer = setInterval(function () {
      let osTop = document.documentElement.scrollTop || document.body.scrollTop;
      let ispeed = Math.floor(-osTop / 5);
      document.documentElement.scrollTop = document.body.scrollTop = osTop + ispeed;
      this.isTop = true;
      if (osTop === 0) {
        clearInterval(timer);
      }
    }, 10);
  })
}

const handleClickCard=(essayId)=>{
  const timer = setInterval(function () {
    let osTop = document.documentElement.scrollTop || document.body.scrollTop;
    let ispeed = Math.floor(-osTop / 5);
    document.documentElement.scrollTop = document.body.scrollTop = osTop + ispeed;
    this.isTop = true;
    if (osTop === 0) {
      clearInterval(timer);
    }
  }, 10);
  router.push("/visitor/preview/"+essayId)
}
</script>

<style scoped>

</style>